<template>
	<view
		class="collect-pages"
		style="width: 750rpx; height: 100vh; position: relative"
	>
		<view
			class="navbar"
			style="height: 44px"
		>
			<u-navbar
				title="我的收藏"
				@rightClick="rightClick"
				:autoBack="true"
				:border="true"
			></u-navbar>
		</view>
		<scroll-view
			scroll-y="true"
			:refresher-enabled="false"
			@scrolltolower="toBottom"
			@scrolltoupper="toUpper"
			class="collect-scroll-view"
		>
			<view
				class="scroll-view-item"
				style="width: 100%; display: flex; justify-content: center"
			>
				<view
					class="card-box"
					style="display: flex; flex-wrap: wrap; justify-content: space-between; width: 95%"
				>
					<CardVue
						v-for="(cardData, cardindex) in dataGroup"
						:key="cardindex"
						:cardData="cardData"
					></CardVue>
				</view>
			</view>
		</scroll-view>
		<view
			class="noData"
			v-if="isNone"
			style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)"
		>
			<span style="font-size: 18px; color: #999">没有数据呐~</span>
		</view>
	</view>
</template>

<script>
import CardVue from '../../components/index/index_card/Card.vue';
import loaderTowVue from '../../components/loaderTow/loaderTow.vue';
import { getCard } from '@/common/api/cardApi.js';
import { getCollectCard } from '@/common/api/cardApi.js';
import { mapState, mapMutations } from 'vuex';
export default {
	data() {
		return {
			showScrollViewActive: false,
			isLoadingMore: true,
			localCardList: [],
			page: 1,
			requestNum: [],
			isOver: false,
			dataGroup: [],
			isBottom: false,
			isNone: true
		};
	},
	components: {
		CardVue,
		loaderTowVue
	},
	methods: {
		...mapState({
			userInfo: (state) => state.user.userInfo
		}),
		init() {
			const that = this;
			const uid = this.userInfo().uid;
			getCollectCard(uid)
				.then((res) => {
					that.dataGroup = res.cardList;
					if (that.dataGroup.length) {
						that.isNone = false;
					}
				})
				.catch((err) => {
					console.log('加载失败了', err);
				});
		},
		async getInfo() {
			await this.init();
		},
		lowerBottom() {
			console.log('触底加载');
		},
		async toBottom() {},
		toUpper() {
			this.showScrollViewActive = false;
		}
	},
	async onPullDownRefresh() {
		uni.showToast({
			title: '正在刷新...'
		});
		await this.getInfo();
		uni.showToast({
			title: '刷新成功'
		});
		uni.stopPullDownRefresh();
	},
	mounted() {
		this.init();
	}
};
</script>

<style></style>
